<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">欢迎你，{{ username }}</div>

      <leftmenu :menu_number="4"></leftmenu>
    </a-layout-sider>

    <a-layout>
      <headmenu></headmenu>

      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '500px',
        }"
      >
        <h2>审批工单</h2>
        <a-breadcrumb>
          <a-breadcrumb-item>我审批的工单</a-breadcrumb-item>
          <!-- <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item> -->
          <!-- <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item> -->
          <a-breadcrumb-item>我审批的工单</a-breadcrumb-item>
        </a-breadcrumb>

        <a-layout-content
          :style="{
            margin: '24px 16px',
            padding: '24px',
            background: '#fff',
            minHeight: '500px',
          }"
        >
          <a-table
            bordered
            :data-source="dataSource"
            :columns="columns"
            :rowKey="(record) => record.id"
          >
            <template slot="operation" slot-scope="text, record">
              <a-popconfirm
                title="是否添加"
                @confirm="() => updatetask(record.id)"
              >
                <a href="Javascript:void(0)">去处理</a>
              </a-popconfirm>
            </template>
          </a-table>
        </a-layout-content>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { get_task } from "./axios_http/api";
// 导入组件
import leftmenu from "./leftmenu.vue";
import headmenu from "./headmenu.vue";
export default {
  data() {
    return {
      collapsed: false,
      username: localStorage.getItem("username"),
      columns: [
        { title: "id", dataIndex: "id" },
        { title: "用户名", dataIndex: "username" },
        { title: "工单类型", dataIndex: "name" },
        // 指定操作列
        {
          title: "operation",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      // 具体数据
      dataSource: [],
    };
  },
  methods: {
    updatetask(task_id) {
      this.$router.push({ name: "approvalTask", query: { task_id: task_id } });
    },
    task_data() {
      get_task().then((resp) => {
        console.log(resp);
        for (var i = 0; i < resp.data.lenlength; i++) {}
        this.dataSource = resp.data;
        console.log(this.dataSource);
      });
    },
  },
  components: {
    leftmenu: leftmenu,
    headmenu: headmenu,
  },
  created() {
    this.task_data();
  },
};
</script>